<template>
	<view class="loginbackground">
		<view class="" v-show="flag == '1'">
			<view class="text-center">
				<image class="img-title" src="../../static/img/loginTitle.png" mode=""></image>
			</view>
			<view class="text-center color-fff size-18 marginb-40">
				{{flag=="1"?"登录":"注册"}}
			</view>
			<view class="loginInput">
				<image class="img-left" src="../../static/img/ic_account_left.png" mode=""></image>
				<image @click="clearTel" v-if="this.info.telNo.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff" @keydown.native="keydown($event)" placeholder="请输入手机号码" :maxlength="13" class="uni-input size-14" type="text" v-model="info.telNo" />
			</view>
			<view class="loginInput margint-20">
				<image class="img-left" src="../../static/img/ic_password_left.png" mode=""></image>
				<image @click="clearPwd" v-if="this.info.loginPwd.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<image @click="showPwd = !showPwd;" v-if="!showPwd" class="img-right" src="../../static/img/ic_eye_close.png" mode=""></image>
				<image @click="showPwd = !showPwd;" v-else class="img-right" src="../../static/img/ic_eye_open.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff" v-if="!showPwd" :placeholder="describedText" class="uni-input size-14" type="password" v-model="info.loginPwd" />
				<input v-input-fb placeholder-class="color-fff" v-else :placeholder="describedText" class="uni-input size-14" type="text" v-model="info.loginPwd" />
			</view>
			<view class="base-color padding24-50">
				<view class="flex-start">
					<checkbox-group>
						<checkbox @click="isChecked = !isChecked" :checked="isChecked" />
					</checkbox-group>
					<view class="margind-20">
						<text class="base-size color-de">我已同意</text>
						<text @click="gotousePact" class="base-size color-fff">《用户注册协议》</text>
						<text @click="gotoprivacyPact" class="base-size color-fff">《隐私保护协议》</text>
					</view>
				</view>
				<button class="confirm" v-bind:class="{'valid-btn':isValid}" @click="confirm" type="primary">立即登录</button>
				<view class="color-fff flex-between base-size paddinglr-30 margint-30">
					<text @click="gotoReset" >忘记密码？</text>
					<text @click="flag = '2'">立即注册</text>
				</view>
			</view>
		</view>
		<view class="" v-show="flag == '2'">
			<view class="text-center">
				<image class="img-title" src="../../static/img/loginTitle.png" mode=""></image>
			</view>
			<view class="text-center color-fff size-18 marginb-40">
				{{flag=="1"?"登录":"注册"}}
			</view>
			<view class="loginInput">
				<image class="img-left" src="../../static/img/ic_account_left.png" mode=""></image>
				<image @click="clearTel" v-if="this.loginInfo.telNo.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff"  @keydown.native="loginkeydown($event)" placeholder="请输入手机号码" :maxlength="13" class="uni-input size-14" type="text" v-model="loginInfo.telNo" />
			</view>
			<view class="flex-between margint-20" v-if="flag == '2'">
				<view class="loginInput widthb-50 height-80">
					<image class="img-left" src="../../static/img/telno.png" mode=""></image>
					<input v-input-fb placeholder-class="color-fff" placeholder="请输入验证码" :maxlength="6" class="uni-input size-14" type="number" v-model="loginInfo.verificationCode" />
				</view>
				<button  :disabled="showData" @click="getcodeFun" class="height-80 size-14 padding-0 width-200 marginr-50" style="background-color: #1f9dd8;color: #fff!important;">
					<template v-if="sending">
						获取验证码
					</template>
					<template v-else>
						{{second}}s
					</template>
				</button>
			</view>
			<view class="loginInput margint-20">
				<image class="img-left" src="../../static/img/ic_password_left.png" mode=""></image>
				<image @click="clearPwd" v-if="this.loginInfo.loginPwd.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<image @click="loginshowPwd = !loginshowPwd" v-if="!loginshowPwd" class="img-right" src="../../static/img/ic_eye_close.png" mode=""></image>
				<image @click="loginshowPwd = !loginshowPwd" v-else class="img-right" src="../../static/img/ic_eye_open.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff" v-if="!loginshowPwd" @blur="clearBlur" :placeholder="setpassword" class="uni-input size-14" type="password" v-model="loginInfo.loginPwd" />
				<input v-input-fb placeholder-class="color-fff" v-else @blur="clearBlur" :placeholder="setpassword" class="uni-input size-14" type="text" v-model="loginInfo.loginPwd" />
			</view>
			<view class="loginInput margint-20">
				<image class="img-left" src="../../static/img/ic_account_left.png" mode=""></image>
				<image @click="clearinvitationCode" v-if="this.loginInfo.invitationCode.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff" :placeholder="setphoneNumber" :maxlength="11" class="uni-input size-14" type="number" v-model="loginInfo.invitationCode" />
			</view>
			<view class="base-color padding24-50">
				<view class="flex-start">
					<checkbox-group>
						<checkbox @click="isChecked = !isChecked" :checked="isChecked" />
					</checkbox-group>
					<view class="margind-20">
						<text class="base-size color-de">我已同意</text>
						<text @click="gotousePact" class="base-size color-fff">《用户注册协议》</text>
						<text @click="gotoprivacyPact" class="base-size color-fff">《隐私保护协议》</text>
					</view>
				</view>
				<button class="confirm" v-bind:class="{'valid-btn':loginisValid}" @click="loginconfirm" type="primary">立即注册</button>
			</view>
		</view>
		<uni-prompt ref="prompt" :title="promptTitle" :url="goUrl"></uni-prompt>
	</view>
</template>

<script>
	import unicore from '@/core/core.service.ts'
	import graceChecker from "@/common/graceChecker.js"
	export default {
		data() {
			return {
				info:{
					telNo:"",
					loginPwd:"",
				},
				loginInfo:{
					telNo:"",
					loginPwd:"",
					invitationCode:"",
					verificationCode:"",
				},
				describedText: '请输入登录密码',
				setpassword: '请设置6-12位密码（字母＋数字）',
				setphoneNumber:'请输入推荐人手机号码（可选）',
				flag:"1",
				sending: true, // 显示获取验证码按钮
				isChecked: false,
				second: 60,
				showData: false,
				showCode: false ,// 显示验证码模块,
				showPwd:false,
				loginshowPwd:false,
				promptTitle:'',
				goUrl:'',
			}
		},
	
		methods: {
			// blurEvent(e){
			// 	const telNo = this.info.telNo.replace(/\ /g,"");
			// 	if(this.$core.regexp.isMobile(telNo))
			// 	this.$store.dispatch('checkAcountPub',{
			// 		telNo: telNo
			// 	}).then(res => {
			// 		this.flag = res.data.flag;
			// 	})
			// 	this.clearBlur()
			// },
			loginconfirm(){
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				if (this.isChecked === true) {
					const wxOpenId = unicore.dom.getQueryString("wxOpenId");
					 unicore.util.localStorage.set("wxOpenId",wxOpenId)
					if (this.loginisValid) {
						let src = 'registerThirdEncPub'
						let parms = { // 注册
							telNo: telNo,
							verificationCode: this.loginInfo.verificationCode,
							loginPwd: this.loginInfo.loginPwd,
							invitationCode: this.loginInfo.invitationCode,
							fromNo: 'WXGZH',
							thirdId: wxOpenId
						}
						console.log(parms, 'parms')
						this.$store.dispatch(src, parms).then(res => {
							if(res.reqResult.code == 1){
								let redirect = decodeURIComponent(unicore.dom.getQueryString("redirect"))
								console.log(redirect,'redirect')
								this.promptTitle = res.reqResult.msg
								this.goUrl = redirect
								this.$refs.prompt.open()
								setInterval(()=>{
									this.flag = '1'
								},2000)
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title:graceChecker.error
						})
					}
				} else {
					uni.showToast({
						icon: "none",
						title: '请先阅读并勾选协议'
					})
				}
				
			},
			gotoReset(){
				uni.navigateTo({
					url:'/pages/login/refound'
				})
			},
			confirm(){
				const telNo = this.info.telNo.replace(/\ /g,"");
				if (this.isChecked === true) {
					const wxOpenId = unicore.dom.getQueryString("wxOpenId");
					 unicore.util.localStorage.set("wxOpenId",wxOpenId)
					if (this.isValid) {
						let src = 'loginThirdEncPub'
						let parms = { // 登录
							telNo: telNo,
							loginPwd: this.info.loginPwd,
							fromNo: 'WXGZH',
							thirdId: wxOpenId
						}
						console.log(parms, 'parms')
						this.$store.dispatch(src, parms).then(res => {
							if(res.reqResult.code == 1){
								let redirect = decodeURIComponent(unicore.dom.getQueryString("redirect"))
								console.log(redirect,'redirect')
								this.promptTitle = res.reqResult.msg
								this.goUrl = redirect
								this.$refs.prompt.open()
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title:graceChecker.error
						})
					}
				} else {
					uni.showToast({
						icon: "none",
						title: '请先阅读并勾选协议'
					})
				}
			},
			getyzCode(){
				let result = setInterval(()=>{
					-- this.second;
					if (this.second < 0) {
						clearInterval(result)
						this.sending = true
						this.showData = false
						this.second = 60
					}
				},1000)
			},
			getcodeFun () {
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				if(this.$core.regexp.isMobile(telNo))
				{
					this.$store.dispatch('getComCodePub',{
						telNo: telNo,
						flag: '1',
						realSend: false
					}).then(res => {
						if (res.reqResult.code == 1) {
							this.loginInfo.verificationCode = res.reqResult.temp;
							uni.showToast({
								icon: "none",
								title: "验证码发送成功"
							})
						}
					})
					this.sending = false
					this.showData = true
					this.getyzCode()
				} else {
					uni.showToast({
						title:"手机号格式不正确，请确认！",
						icon:"none"
					})
				}
			},
			gotousePact(){
				uni.navigateTo({
					url:"/pages/login/userPact"
				})
			},
			gotoprivacyPact(){
				uni.navigateTo({
					url:"/pages/login/privacyPact"
				})
			},
			clearBlur(e){
				setTimeout(()=>{
					document.body.scrollTop=0;
				},200)
			},
			keydown(e){
				e = e || window.event
				let keyCode = e.keyCode || e.which || e.charCode
				setTimeout(()=>{ // uni-app input有延迟
					let telNo = this.info.telNo
					telNo=telNo.replace(/[^0-9,\s]+/g,'')
					if(e.keyCode === 8) {
						return
					}else if(telNo.length === 3 || telNo.length === 8) {
						telNo += " "
					}
					this.info.telNo = telNo
				},0)
			},
			loginkeydown(e){
				e = e || window.event
				let keyCode = e.keyCode || e.which || e.charCode
				setTimeout(()=>{ // uni-app input有延迟
					let telNo = this.loginInfo.telNo
					telNo=telNo.replace(/[^0-9,\s]+/g,'')
					if(e.keyCode === 8) {
						return
					}else if(telNo.length === 3 || telNo.length === 8) {
						telNo += " "
					}
					this.loginInfo.telNo = telNo
				},0)
			},
			clearTel(){
				this.info.telNo = "";
				this.loginInfo.telNo = "";
			},
			clearPwd(){
				this.info.loginPwd = "";
				this.loginInfo.loginPwd = "";
			},
			clearinvitationCode(){
				this.loginInfo.invitationCode = "";
			},
		},
		computed:{
			isValid(){
				const telNo = this.info.telNo.replace(/\ /g,"");
				const info = {
					telNo,
					loginPwd:this.info.loginPwd
				}
				let rule = [
					{name: 'telNo', checkType: 'boolean',checkRule:this.$core.regexp.isMobile(telNo), errorMsg: '手机号码格式不正确'},
					{name: 'loginPwd', checkType: 'boolean',checkRule:this.$core.regexp.isPassword(this.info.loginPwd), errorMsg: '请输入6-12位英文+数字混合密码'}
				]
				let checkRes = graceChecker.check(info, rule)
				return checkRes;
			},
			loginisValid(){
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				const loginInfo = {
					telNo,
					loginPwd:this.loginInfo.loginPwd,
					verificationCode:this.loginInfo.verificationCode,
				}
				let rule = [
					{name: 'telNo', checkType: 'boolean',checkRule:this.$core.regexp.isMobile(telNo), errorMsg: '手机号码格式不正确'},
					{name: 'loginPwd', checkType: 'boolean',checkRule:this.$core.regexp.isPassword(this.loginInfo.loginPwd), errorMsg: '请输入6-12位英文+数字混合密码'},
					{name: 'verificationCode', checkType: 'notnull', errorMsg: '验证码不能为空'},
				]
				let checkRes = graceChecker.check(loginInfo, rule)
				return checkRes;
			},
		}
	}
</script>
<style scoped>
	.loginInput{margin: 0 50upx;background-color: #5555;border-radius: 10upx;}
	.background-5555{background-color: #5555!important;}
	.loginInput .uni-input{height: 80upx;line-height: 80upx;color: #fff;}
	.color-fff{
		color: #fff;
	}
	uni-checkbox{
		zoom: 0.7;
		position: relative;
		top: -2upx;
	}
	.color-de{
		color: #89cff0;
	}
	.valid-btn{
		background-color: #1f9dd8!important;
	}
	.confirm{
		background-color: #888888;
	}
	.img-title{
		width: 120upx;
		height: 120upx;
		margin: 200upx 0 20upx;
	}
	.img-left{
		float: left;
		width: 44upx;
		height: 44upx;
		margin-top: 18upx;
		margin-left: 8upx;
		margin-right: 8upx;
	}
	.img-right{
		float: right;
		width: 32upx;
		height: 32upx;
		margin-top: 24upx;
		margin-left: 10upx;
		margin-right: 16upx;
	}
</style>
